<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>axupimgs</title>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
        background: #fff;
      }
      body::-webkit-scrollbar-thumb {
        background-color: #d7d7d7;
        border-radius: 2px;
      }
      body::-webkit-scrollbar {
        width: 8px;
        height: 10px;
      }
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      #wrap {
        padding: 10px;
      }
      #topbar {
        padding: 10px 0;
        border-bottom: 1px solid #ccc;
        text-align: right;
      }
      #topbar button {
        margin: 0;
        margin-left: 5px;
        outline: none;
        padding: 4px 16px;
        box-sizing: border-box;
        display: inline-block;
        border: none;
        border-radius: 3px;
        text-align: center;
        cursor: pointer;
        font-size: 14px;
        line-height: 1.5;
        background-color: #f0f0f0;
        color: #223;
      }
      #topbar button.primary {
        background-color: #009688;
        color: #fff;
      }
      #topbar button:hover {
        opacity: 0.8;
        color: #fff;
      }
      #topbar button.removeall {
        float: left;
      }
      #file_list {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        padding-top: 10px;
      }
      #file_list:empty:after {
        content: '可以直接拖拽文件到这里';
        color: #777;
        font-size: 0.8em;
      }
      #file_list li {
        position: relative;
        display: block;
        vertical-align: top;
        padding: 5px 5px;
        border-radius: 5px;
      }
      #file_list li.up-over {
      }
      #file_list li.up-now {
      }
      #file_list li.up-now:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.8) url(loading.gif) center 85px no-repeat;
        background-size: 20px 20px;
        border-radius: 5px;
        z-index: 999;
      }
      #file_list li:hover {
        background-color: #ddd;
      }
      #file_list li .picbox {
        display: flex;
        flex: 0 0 auto;
        justify-content: center;
        overflow: hidden;
        position: relative;
        width: 100%;
        padding-top: 100%;
        align-items: center;
      }
      #file_list li .picbox img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
      }
      #file_list li.up-over .picbox:after {
        content: url('data:image/svg+xml;%20charset=utf8,%3Csvg%20viewBox%3D%220%200%201024%201024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M512%200C229.376%200%200%20229.376%200%20512s229.376%20512%20512%20512%20512-229.376%20512-512S794.624%200%20512%200z%22%20fill%3D%22%234AC711%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M855.552%20394.752l-358.4%20358.4a50.9952%2050.9952%200%200%201-72.192%200l-204.8-204.8c-18.944-19.968-18.944-51.2%200-71.168a50.5344%2050.5344%200%200%201%2072.192-1.024L460.8%20644.608l322.048-322.048c19.968-18.944%2051.2-18.944%2071.168%200%2020.48%2019.456%2020.992%2051.712%201.536%2072.192z%22%20fill%3D%22%23FFFFFF%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
        position: absolute;
        bottom: 2px;
        right: 2px;
        z-index: 9;
      }
      #file_list li .tools {
        display: none;
        position: absolute;
        bottom: 5px;
        right: 5px;
        z-index: 99;
      }
      #file_list li:hover .tools {
        display: block;
      }
      #file_list li .tools .remove {
        cursor: pointer;
      }
      #file_list li .tools .remove:after {
        content: url('data:image/svg+xml;%20charset=utf8,%3Csvg%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M17%206h3a1%201%200%200%201%200%202h-1v11a3%203%200%200%201-3%203H8a3%203%200%200%201-3-3V8H4a1%201%200%201%201%200-2h3V5a3%203%200%200%201%203-3h4a3%203%200%200%201%203%203v1zm-2%200V5a1%201%200%200%200-1-1h-4a1%201%200%200%200-1%201v1h6zm2%202H7v11a1%201%200%200%200%201%201h8a1%201%200%200%200%201-1V8zm-8%203a1%201%200%200%201%202%200v6a1%201%200%200%201-2%200v-6zm4%200a1%201%200%200%201%202%200v6a1%201%200%200%201-2%200v-6z%22%3E%3C/path%3E%3C/svg%3E');
      }
      #file_list li .namebox {
        font-size: 14px;
        line-height: 20px;
        max-height: 40px;
        overflow: hidden;
        padding: 5px 10px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        display: -webkit-box;
        /*! autoprefixer: ignore next */
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      #file_list li .namebox span {
        word-break: break-all;
        vertical-align: top;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <div id="topbar">
        <button class="addfile primary">+ 添加文件</button><button class="upall primary">全部上传</button
        ><button class="removeall">清空列表</button>
      </div>
      <ul id="file_list"></ul>
    </div>

    <script>
      var editor = parent.tinymce.activeEditor
      var axupimgs = parent.axupimgs
      axupimgs.res = [] //存放本地文件的数组
      var blobInfo = { file: null }
      blobInfo.blob = function() {
        return this.file
      }
      var upload_handler = axupimgs.images_upload_handler
      var upload_base_path = axupimgs.images_upload_base_path

      //为列表添加排序
      function reSort() {
        document.querySelectorAll('#file_list li').forEach((el, i) => {
          el.setAttribute('data-num', i)
        })
      }

      function addList(files) {
        var files_sum = files.length
        var vDom = document.createDocumentFragment()
        for (let i = 0; i < files_sum; i++) {
          let file = files[i]
          let blobUrl = window.URL.createObjectURL(file)
          axupimgs.res.push({ file: file, blobUrl: blobUrl, url: '' })
          let li = document.createElement('li')
          li.setAttribute('class', 'up-no')
          li.setAttribute('data-time', file.lastModified)
          li.innerHTML =
            '<div class="picbox"><img src="' +
            blobUrl +
            '"></div><div class="namebox"><span>' +
            file.name +
            '</span></div><div class="tools"><a class="remove"></a></div>'
          vDom.appendChild(li)
        }
        document.querySelector('#file_list').appendChild(vDom)
        //reSort();
      }

      //清空列表
      document.querySelector('#topbar .removeall').addEventListener('click', () => {
        axupimgs.res = []
        document.querySelectorAll('#file_list li').forEach((el, i) => {
          el.parentNode.removeChild(el)
        })
      })
      //拖拽添加
      document.addEventListener('dragover', e => {
        e.stopPropagation()
        e.preventDefault()
        e.dataTransfer.dropEffect = 'copy'
      })
      document.addEventListener('drop', e => {
        e.stopPropagation()
        e.preventDefault()
        if (!e.dataTransfer.files) {
          return false
        }
        var dropfiles = e.dataTransfer.files
        if (!(dropfiles.length > 0)) {
          return false
        }
        var exts = axupimgs.axupimgs_filetype
          .replace(/(\s)+/g, '')
          .toLowerCase()
          .split(',')
        var files = []
        for (let file of dropfiles) {
          ext = file.name.split('.')
          ext = '.' + ext[ext.length - 1]
          for (let s of exts) {
            if (s == ext) {
              files.push(file)
              break
            }
          }
        }
        if (files.length > 0) {
          addList(files)
        }
      })

      //添加文件
      document.querySelector('#topbar .addfile').addEventListener('click', () => {
        var input = document.createElement('input')
        input.setAttribute('type', 'file')
        input.setAttribute('multiple', 'multiple')
        input.setAttribute('accept', axupimgs.axupimgs_filetype)
        input.click()
        input.onchange = function() {
          var files = this.files
          addList(files)
        }
      })

      var file_i = 0

      function upAllFiles(n) {
        var len = axupimgs.res.length
        file_i = n
        if (len == n) {
          file_i = 0
          document.querySelector('#topbar .upall').innerText = '全部上传'
          return true
        }
        if (axupimgs.res[n].url != '') {
          n++
          upAllFiles(n)
        } else {
          blobInfo.file = axupimgs.res[n].file
          upload_handler(
            blobInfo,
            function(url) {
              if (upload_base_path) {
                if (upload_base_path.slice(-1) == '/' && url.substr(0, 1) == '/') {
                  url = upload_base_path + url.slice(1)
                } else if (upload_base_path.slice(-1) != '/' && url.substr(0, 1) != '/') {
                  url = upload_base_path + '/' + url
                } else {
                  url = upload_base_path + url
                }
              }
              axupimgs.res[file_i].url = url
              filename = url.split('/').pop()
              var li = document.querySelectorAll('#file_list li')[file_i]
              li.setAttribute('class', 'up-over')
              li.querySelector('.namebox span').innerText = filename
              n++
              upAllFiles(n)
            },
            function(err) {
              document.querySelector('#topbar .upall').innerText = '全部上传'
              document.querySelectorAll('#file_list li.up-now').forEach((el, i) => {
                el.setAttribute('class', 'up-no')
              })
              alert(err)
            }
          )
        }
      }

      document.querySelector('#topbar .upall').addEventListener('click', e => {
        if (e.target.innerText != '全部上传') {
          return false
        }
        if (axupimgs.res.length > 0) {
          document.querySelectorAll('#file_list li.up-no').forEach((el, i) => {
            el.classList ? el.classList.add('up-now') : (el.className += ' up-now')
          })
          e.target.innerText = '上传中...'
          upAllFiles(0)
        }
      })

      var observ_flist = new MutationObserver((muList, observe) => {
        if (muList[0].addedNodes.length > 0) {
          muList[0].addedNodes.forEach(el => {
            el.querySelector('.remove').addEventListener('click', e => {
              var li = e.target.parentNode.parentNode
              var n = li.getAttribute('data-num')
              var el = document.querySelectorAll('#file_list li')[n]
              el.parentNode.removeChild(el)
              axupimgs.res.splice(n, 1)
            })
          })
        }
        reSort()
      })
      observ_flist.observe(document.querySelector('#file_list'), { childList: true })
    </script>
  </body>
</html>
